<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><$ options.title $> - <$ options.description $></title>
    <link href="/static/assets/css/icons/ionicons/css/ionicons.css" rel="stylesheet" type="text/css">
    {#<link href="/static/assets/css/icons/fontawesome/styles.min.css" rel="stylesheet" type="text/css">#}
    <link href="/static/assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">

    <link href="/static/assets/layout4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/assets/layout4/css/core.min.css" rel="stylesheet" type="text/css">
    <link href="/static/assets/layout4/css/components.min.css" rel="stylesheet" type="text/css">
    <link href="/static/assets/layout4/css/colors.min.css" rel="stylesheet" type="text/css">

    <link href="/static/assets/css/extras/animate.min.css" rel="stylesheet" type="text/css">
    <!-- /global stylesheets -->
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <style>
        a.delete {
            z-index: 5;
            position: relative;
        }
        a.delete div {
            width: 76px;
            height: 40px;
            top: 50%;
            left: 50%;
            background: #fefefe;
            position: absolute;
            z-index: 5;
            margin: -20px 0 0 -38px;
            -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 0 6px rgba(46, 48, 56, 0.3);
            -moz-box-shadow: 0 0 6px rgba(46, 48, 56, 0.3);
            box-shadow: 0 0 6px rgba(46, 48, 56, 0.3);
        }
        a.delete div .confirm,
        a.delete div .abort {
            vertical-align: top;
            line-height: 32px;
            position: absolute;
            width: 32px;
            height: 32px;
            margin: 0;
            font-size: 21px !important;
            top: 4px;
            text-align: center;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        a.delete div .confirm:before,
        a.delete div .abort:before {
            line-height: 32px;
            display: block;
        }
        a.delete div .confirm {
            color: #fff;
            background: #ef4748;
            left: 4px;
        }
        a.delete div .abort {
            color: #858a95;
            right: 4px;
        }

        #messages {
            position: fixed;
            top: 65px;
            left: 50%;
            z-index: 110;
            margin-left: 125px;
            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        #messages .animated {
            -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
        }

        @media (max-width: 992px ) {
            #messages {
                margin-left: 0;
            }
        }

        @media (max-width: 768px) {
            #messages {
                left: 15px;
                right: 15px;
                top: 61px;
                -webkit-transform: translate(0, 0);
                -moz-transform: translate(0, 0);
                -o-transform: translate(0, 0);
                -ms-transform: translate(0, 0);
                transform: translate(0, 0);
            }
        }

        .message {
            padding: 8px 10px;
            color: #fff;
            margin: 0 0 5px 0;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .message.success {
            background: #41da54;
        }

        .message.info {
            background: #3f82d7;
        }

        .message.warning {
            background: #e4c139;
        }

        .message.error {
            background: #ef4748;
        }

        .message ol {
            margin: 0;
            padding: 0 0 0 18px;
        }

        .message ol li {
            margin: 4px 0;
        }

    </style>
    {% block style %}{% endblock %}

</head>
<body data-spy="scroll" data-target="#resume-section" data-offset="70" class=" {% block body_style %}{% endblock %}">
<div id="app">

    <!-- Main navbar -->
    <div class="navbar navbar-inverse bg-primary header-highlight ">
        <div class="navbar-header navbar-inverse bg-primary">
            <a class="navbar-brand" href="/admin"><img src="/static/assets/images/logo_light.png" alt=""></a>
            <ul class="nav navbar-nav">
                <li class="disabled"><a data-toggle="collapse" data-target="#navbar-mobile"><i
                                class=" icon-feed position-left"></i>发现</a></li>

            </ul>
        </div>

        <div class="navbar-collapse collapse" id="navbar-mobile">

            {% block main_nav %}

            {% endblock %}
            <ul class="nav navbar-nav navbar-right">
                {% block right_nav %}

                    {# TODO: 这里的 active 样式是 Hard code #}
                    <li class="{% if http.url == '/admin' %} active {% endif %}"><a class="list-group-item" href="/admin"><i class="icon-magazine"></i>我的简历</a></li>

                    <li class="{% if http.url == '/admin/resumes/themes' %} active {% endif %}"><a href="/admin/resumes/themes" class="list-group-item"><i class="icon-bucket "></i>简历主题</a>

                    <li class="disabled"><a href="/admin/resumes/template" class="list-group-item"><i
                                    class=" icon-profile"></i>简历内容模板</a></li>
                {% endblock %}
                <li><a class="" href="/admin/posts/resume"><i class="icon-plus22 position-left"></i>新简历</a></li>

                <li class="dropdown dropdown-user">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        {#<img src="/static/assets/images/avatar.png" alt="">#}
                        <span><$ user_info.name $></span>
                        <i class="caret"></i>
                    </a>

                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class=""><a href="/admin/account"><i class="icon-user-plus"></i> 个人信息</a></li>
                        <li class="divider"></li>
                        <li class="disabled"><a href="#"><i class="icon-cog5"></i> 账户设置</a></li>
                        <li><a href="/admin/logout"><i class="icon-switch2"></i> 登出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    {% block navbar2 %}{% endblock %}
    <div id="messages"></div>


    <!-- Page container -->
    <div class="page-container">

        <!-- Page content -->
        <div class="page-content">
            <!-- Main sidebar -->
            {% block sidebar_main %}{% endblock %}
            <!-- /main sidebar -->

            <!-- Secondary sidebar -->
            {% block sidebar_secondary %}{% endblock %}
            <!-- /secondary sidebar -->

            <!-- Main content -->
            <div class="content-wrapper ">

                {% block fab_menu %}{% endblock %}
                {% block page_navbar %} {% endblock %}
                <!-- Page header -->
                {% block page_header %}{% endblock %}
                <!-- /page header -->

                <!-- Content area -->
                <div class="content">
                    {% block content %}

                    {% endblock %}

                    <!-- Footer -->
{#                    {% block footer %}
                        <div class="footer text-muted">
                            &copy; 2017. Power by <a
                                    href="http://baisheng.me"
                                    target="_blank">Basil</a>
                        </div>
                    {% endblock %}#}
                    <!-- /footer -->

                </div>
                <!-- /content area -->

            </div>
            <!-- /main content -->


            <!-- Opposite sidebar -->
            {% block opposite_sidebar %}
            {% endblock %}
            <!-- /opposite sidebar -->

        </div>
        <!-- /page content -->
    </div>
    <!-- /page container -->

</div>

{% block components %}{% endblock %}

<script type="text/javascript">
    // @formatter:off
    var lang =<$ 'zh-cn' | language | dump | safe $>;
    // @formatter:on
</script>

<script type="text/javascript" src="/static/assets/js/fetch.js"></script>

<script type="text/javascript" src="/static/assets/js/plugins/loaders/pace.min.js"></script>
<script type="text/javascript" src="/static/assets/js/core/libraries/jquery.min.js"></script>
<script type="text/javascript" src="/static/assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Plugin JS files -->
<script type="text/javascript" src="/static/assets/js/plugins/masonry/masonry.pkgd.min.js"></script>

<script type="text/javascript" src="/static/assets/js/plugins/forms/selects/select2.min.js"></script>

<script type="text/javascript" src="/static/assets/js/plugins/moment/moment.min.js"></script>
<script type="text/javascript" src="/static/assets/js/plugins/moment/moment-with-locales.js"></script>
<!-- /plugin js files -->
<script type="text/javascript" src="/static/assets/js/plugins/ui/nicescroll.min.js"></script>
<script type="text/javascript" src="/static/assets/js/plugins/ui/drilldown.js"></script>
<!-- Theme JS files -->
<script type="text/javascript" src="/static/assets/js/plugins/forms/styling/switchery.min.js"></script>
<script type="text/javascript" src="/static/assets/js/pages/animations_css3.js"></script>
<script src="/static/assets/js/vue/vue.js"></script>
<script>
    Vue.config.debug = true;
    Vue.config.devtools = true;
</script>

<script type="text/javascript" src="/static/assets/js/native.history.js"></script>

<script type="text/javascript" src="/static/assets/js/core/app.min.js"></script>
<script type="text/javascript" src="/static/assets/js/plugins/ui/ripple.min.js"></script>
<!-- /theme JS files -->
<script>
    jQuery(document).ready(function ($) {

        $(document).on("click", ".delete", function (e) {

            e.preventDefault();

            var _this = $(this);

            if (!_this.hasClass("active")) {

                _this.addClass("active");

                var div = $("<div><i class='icon confirm ion-ios-checkmark-outline'></i><i class='icon abort ion-ios-close-empty'></i></div>");
                var element = $(this).append(div);

                div.addClass("animated zoomIn");

                div.on("click", ".abort", function () {
                    div.fadeOut(300, function () {
                        div.remove();
                        _this.removeClass("active");
                    });
                });

                div.on("click", ".confirm", function () {

                    if (_this.hasClass("ajax")) {
                        $.ajax({
                            method: "POST",
                            url: _this.attr("href"),
                            success: function () {
                                div.fadeOut(300, function () {
                                    div.remove();
                                    _this.removeClass("active");
                                });
                                eventHub.$emit("fetch");
                                $.event.trigger({
                                    type: "fetch"
                                });
                            }
                        });
                    } else {
                        window.location = _this.attr("href");
                    }
                });

            }

        });
        var focus;

        $(window).focus(function () {
            focus = true;
        }).blur(function () {
            focus = false;
        });

        setInterval("getMessages(focus)", 1000);

    });


    function getMessages(focus) {

        if (focus && document.hasFocus()) {
            $.ajax({
                type: "POST",
                url: "/admin/ajax/messages",
                data: {
                    method: "getMessages"
                },
                dataType: "json",
                success: function (message) {
                    if (!jQuery.isEmptyObject(message)) {
                        $.ajax({
                            type: "POST",
                            url: "/admin/ajax/messages",
                            data: {
                                method: "deleteMessage",
                                index: message.index
                            },
                            success: function () {

                                var element = $(message.html).appendTo("#messages");

                                element.addClass("animated fadeInDown");

                                setTimeout(function () {
                                    element.removeClass("fadeInDown").addClass("fadeOutUp");
                                    element.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
                                        element.remove();
                                    });
                                }, 2200);

                            }
                        });
                    }
                }
            });
        }

    }
</script>

{% block script %}{% endblock %}

</body>
</html>
